import Taro, {Component} from '@tarojs/taro'
import {View, Image, Text, OpenData} from '@tarojs/components'
import { AtGrid ,AtModal} from "taro-ui"
import car from '../../image/ic_car.png'
import job from '../../image/ic_job_mine.png'
import shop from '../../image/ic_shop.png'
import shopFlag from  '../../image/ic_shop_flag.png'
import collectIcon from '../../image/ic_collect_mine.png'
import shopPublishIcon from '../../image/ic_shop_publish.png'

import DataManager from '../../utils/DataManager.js'

import  './me.scss'

import warnIcon from '../../image/ic_warn.png'
import questionIcon from '../../image/ic_question.png'
import BasePage from "../basePage";
import {base_url} from "../../network/config";


export default class PageView extends BasePage {
  config = {
    navigationBarTitleText: '我的个人中心'
  }

  onPullDownRefresh(){
    this.loadUserDetail()
  }

  constructor() {
    super(...arguments)
    this.state = {
      isBindMobile : DataManager.getIsBindMobile(),
      isBusiness: DataManager.getIsBusiness(),
      integral:0,
      showScoreIntro:false,
      myServiceList:[]
    };
    this.shopUrls = []
  }

  componentDidMount(){

  }

  componentDidShow(){
    Taro.eventCenter.trigger('tabIndex' ,3);
    this.loadUserDetail()

    this.setState({
      isBindMobile: DataManager.getIsBindMobile(),
      isBusiness:DataManager.getIsBusiness()
    })

    let myService = []

    if ( this.state.isBusiness == '1' ) {
      myService = [
        {image: car, value: '我的找车'},
        {image: job, value: '我的招聘'},
        {image: collectIcon, value: '我的收藏'},
        {image: shopPublishIcon , value: '积分商城'},
        {image: shop , value: '我的商品'},
        {image:collectIcon , value:'收货地址'},
        {image: shopPublishIcon , value: '我的便民信息'},
        {image:job , value : '商品录入'}
      ]
    } else {
      myService = [
        {image: car, value: '我的找车'},
        {image: job, value: '我的招聘'},
        {image: collectIcon, value: '我的收藏'},
        {image: shopPublishIcon , value: '积分商城'},
        {image: shop , value: '我的商品'},
        {image:collectIcon , value:'收货地址'},
        {image: shopPublishIcon , value: '我的便民信息'},
        {image: shop, value: '成为商家'},
      ]
    }

    this.setState({
      myServiceList: myService
    });
  }

  loadUserDetail(){
    let _this = this;

    let url = base_url + 'rest/user/userDetail'
    Taro.request({
      url:url,
      data: {
        token:DataManager.getToken(),
        platform:'android_c',
        weixinId:DataManager.getWeiXinId(),
        loginChannel:'c',
        appId:'KC876D98B30UA40CJSNHI689FB33SDW',
        digest : 'dda484557c12febe48139d8f44051c13',
      },
      method: 'GET',
      success(res) {
        console.log('userDetail=========' + JSON.stringify(res))
        if (res.data && res.data.data){
          _this.setState({
            integral : res.data.data.integral
          })
        }
      },
      complete(){
        Taro.stopPullDownRefresh();
      }
    })
  }

  onMyServiceClick = (item , index ) =>{
    let url;
    if (index == 0){ // 我的找车
      url = `/pages/me/myCarList`;
    } else if (index == 1){//  我的招聘
      url = `/pages/me/myJobList`;
    } else if (index == 2){ // 我的收藏
      url = `/pages/me/myCollections`;
    } else if (index == 3){ //  积分商城
      url = `/pages/me/scoreExchangeList`;
    } else if (index == 4){ // 我的兑换
      url = `/pages/me/myExchange`;
    } else if (index == 5){// 收货地址
      url = `/pages/me/receiveAddressList`;
    } else if (index == 6){
      url = `/pages/me/myConvenienceList`;
    } else if (index == 7){
      if (this.state.isBusiness == '1' ){
        url = `/pages/me/scorePost`;
      } else {
        url = `/pages/me/shopRegister`;
      }
    }
    if (url){
      Taro.navigateTo({
        url : url
      })
    }
  }

  onShopServiceClick = (item , index ) =>{
    Taro.navigateTo({
      url :  this.shopUrls[index]
    })
  }

  onBindMobileClick = () =>{
    Taro.navigateTo({
      url : `/pages/me/bindMobile`
    })
  }

  onScoreIntroShow = () =>{
    this.setState({showScoreIntro : true})
  }

  onScoreIntroHide = () =>{
    this.setState({showScoreIntro : false})
  }

  render() {

    let bindPhone = DataManager.getMobile() ? DataManager.getMobile() : '';

    let integralText = '当前积分：' + this.state.integral;

    return (
      <View className='me-container'>
        <View className='me-head-container'>
          <OpenData className='me-head-image' type='userAvatarUrl' />
          <View className='me-head-sub-container'>
            <View className='me-head-name-container'>
              <View className='me-head-info-container'>
                <OpenData className='me-head-name' type='userNickName' />
              </View>
              <View>
                {this.state.isBusiness && <Image style='width:20px;height:20px' src={shopFlag} />}
              </View>
              <Text className='me-integral-text'>{integralText}</Text>
              <Image style='width:19px;height:19px;margin-left:5px' src={questionIcon} onClick={this.onScoreIntroShow.bind(this)} />
            </View>
            {bindPhone && <Text className='me-head-phone'>{bindPhone}</Text>}
          </View>

        </View>
        <View className='me-head-divider' />
        {this.state.isBindMobile == 0 &&
          <View className='me-mobile-bind-container' onClick={this.onBindMobileClick.bind(this)}>
            <Image className='me-warn-icon' src={warnIcon} />
            <Text className='me-mobile-bind-text'>还没绑定手机号？快去绑定吧</Text>
          </View>
        }
        <View className='me-entrance-container'>
          <View className=''>
            <AtGrid data={this.state.myServiceList} hasBorder={false} onClick={this.onMyServiceClick.bind(this)} />
          </View>
        </View>

        <View className='me-head-divider' />
        <AtModal
          isOpened={this.state.showScoreIntro}
          title='积分获取方式'
          confirmText='确认'
          onClose={this.onScoreIntroHide.bind(this)}
          onConfirm={this.onScoreIntroHide.bind(this)}
          content='分享内容至群或个人，好友通过分享点击授权可获取5积分！'
        />
      </View>
    )
  }

}

